<template>
  <div>
    <el-dialog
      title="新增功能"
      :visible.sync="functionDialogVisible"
      width="800px"
      :before-close="closeFunctionDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div
        style="
          display: flex;
          height: 40px;
          align-items: center;
          margin-bottom: 15px;
        "
      >
        <div class="title">功能类型</div>
        <el-radio-group
          v-model="functionType"
          @change="onChangeFunctionType"
          size="small"
          text-color="#ffffff"
          fill="#7367f0"
          :disabled="radioGroupDisabled"
        >
          <el-radio-button label="property">属性</el-radio-button>
          <el-radio-button label="service">服务</el-radio-button>
          <el-radio-button label="event">事件</el-radio-button>
        </el-radio-group>
      </div>
      <el-form
        :model="propertyInfo"
        :rules="rules"
        ref="refFunctionInfo"
        label-width="110px"
        v-if="functionType == 'property'"
      >
        <el-form-item size="small" label="名称" prop="name" key="95">
          <el-input
            clearable
            v-model.trim="propertyInfo.name"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="标识符" prop="identifier" key="94">
          <el-input
            clearable
            v-model.trim="propertyInfo.identifier"
            placeholder="标识符"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="描述" prop="description">
          <el-input
            clearable
            v-model.trim="propertyInfo.description"
            placeholder="描述"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="组织机构" prop="unit">
          <el-input
            clearable
            v-model.trim="propertyInfo.unit"
            placeholder="组织机构"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="数据类型" prop="dataType">
          <el-select
            v-model="propertyInfo.dataType"
            placeholder="数据类型"
            style="width: 350px"
            class="elSelect"
          >
            <el-option
              v-for="(item, index) in dataTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          size="small"
          label="取值范围"
          v-if="propertyInfo.dataType"
        >
          <div class="range-input">
            <el-input
              v-model.trim="propertyInfo.min"
              placeholder="最小值"
              maxlength="5"
              type="number"
              clearable
              style="width: 200px"
            ></el-input>
            ——
            <el-input
              v-model.trim="propertyInfo.max"
              placeholder="最大值"
              type="number"
              maxlength="5"
              clearable
              style="width: 200px"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
      <el-form
        :model="serviceInfo"
        :rules="rules"
        ref="refFunctionInfo"
        label-width="110px"
        v-if="functionType == 'service'"
      >
        <el-form-item size="small" label="名称" prop="name" key="97">
          <el-input
            clearable
            v-model.trim="serviceInfo.name"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="标识符" prop="identifier" key="96">
          <el-input
            clearable
            v-model.trim="serviceInfo.identifier"
            placeholder="标识符"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <!-- 服务输入参数 -->
        <el-form-item size="small" label="输入参数" prop="description">
          <el-table
            :data="serviceInputData"
            :header-cell-style="headerStyle"
            max-height="400px"
            v-if="!serviceIsInputActive"
          >
            <el-table-column
              align="center"
              prop="name"
              label="参数名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="identifier"
              label="标识符"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="描述"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="dataType"
              label="类型"
            ></el-table-column>
            <el-table-column align="center" key="1">
              <template slot="header" slot-scope="scope">
                <!-- 服务输入参数 -->
                <el-button
                  size="mini"
                  @click="
                    onParamsAdd('serviceInputInfo', 'serviceIsInputActive')
                  "
                  >添加参数</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <i
                    @click="
                      onEditParams(
                        scope.row,
                        'serviceInputInfo',
                        'serviceIsInputActive'
                      )
                    "
                    class="iconfont tianxie tableBtnIcon"
                    style="margin-right: 10px"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <i
                    @click="onDelParams(scope.row, 'serviceInputData')"
                    class="iconfont shanchu tableBtnIcon"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-tabs
            type="border-card"
            v-model="serviceInputSetting"
            v-else="ServiceIsInputActive"
          >
            <el-tab-pane label="参数设置" name="input">
              <el-form
                :model="serviceInputInfo"
                :rules="serviceInputInfoRule"
                ref="refServiceInputInfo"
                label-width="110px"
              >
                <el-form-item size="small" label="名称" prop="name">
                  <el-input
                    clearable
                    v-model.trim="serviceInputInfo.name"
                    placeholder="名称"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="标识符" prop="identifier">
                  <el-input
                    clearable
                    v-model.trim="serviceInputInfo.identifier"
                    placeholder="标识符"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="描述" prop="description">
                  <el-input
                    clearable
                    v-model.trim="serviceInputInfo.description"
                    placeholder="描述"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="组织机构" prop="unit">
                  <el-input
                    clearable
                    v-model.trim="serviceInputInfo.unit"
                    placeholder="组织机构"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="类型" prop="dataType">
                  <el-select
                    v-model="serviceInputInfo.dataType"
                    placeholder="数据类型"
                    style="width: 350px"
                    class="elSelect"
                  >
                    <el-option
                      v-for="(item, index) in dataTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  size="small"
                  label="取值范围"
                  v-if="serviceInputInfo.dataType"
                >
                  <div class="range-input">
                    <el-input
                      v-model.trim="serviceInputInfo.min"
                      placeholder="最小值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                    ——
                    <el-input
                      v-model.trim="serviceInputInfo.max"
                      placeholder="最大值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-form>
              <div style="display: flex; justify-content: flex-end">
                <el-button
                  size="mini"
                  @click="
                    onCancelParams('serviceInputInfo', 'serviceIsInputActive')
                  "
                  class="cancel-button"
                  >取 消</el-button
                >
                <el-button
                  size="mini"
                  @click="
                    onConfirmParams(
                      'refServiceInputInfo',
                      'serviceInputInfo',
                      'serviceInputData',
                      'serviceIsInputActive'
                    )
                  "
                  class="confirm-button"
                  v-preventReClick="1000"
                  >确 定</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <!-- 服务输出参数 -->
        <el-form-item size="small" label="输出参数" prop="description">
          <el-table
            :data="serviceOutputData"
            :header-cell-style="headerStyle"
            max-height="400px"
            v-if="!serviceIsOutputActive"
          >
            <el-table-column
              align="center"
              prop="name"
              label="参数名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="identifier"
              label="标识符"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="描述"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="dataType"
              label="类型"
            ></el-table-column>
            <el-form-item
              size="small"
              label="取值范围"
              v-if="serviceOutputData.dataType"
            >
              <el-input
                v-model.trim="serviceOutputData.min"
                placeholder="最小值"
                maxlength="5"
                type="number"
                clearable
              ></el-input>
              ——
              <el-input
                v-model.trim="serviceOutputData.max"
                placeholder="最大值"
                maxlength="5"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-table-column align="center" key="2">
              <template slot="header" slot-scope="scope">
                <el-button
                  size="mini"
                  @click="
                    onParamsAdd('serviceOutputInfo', 'serviceIsOutputActive')
                  "
                  >添加参数</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <i
                    @click="
                      onEditParams(
                        scope.row,
                        'serviceOutputInfo',
                        'serviceIsOutputActive'
                      )
                    "
                    class="iconfont tianxie tableBtnIcon"
                    style="margin-right: 10px"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <i
                    @click="onDelParams(scope.row, 'serviceOutputData')"
                    class="iconfont shanchu tableBtnIcon"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-tabs
            type="border-card"
            v-model="serviceOutputSetting"
            v-if="serviceIsOutputActive"
          >
            <el-tab-pane label="参数设置" name="output">
              <el-form
                :model="serviceOutputInfo"
                :rules="serviceOutputInfoRule"
                ref="refServiceOutputInfo"
                label-width="90px"
              >
                <el-form-item size="small" label="名称" prop="name">
                  <el-input
                    clearable
                    v-model.trim="serviceOutputInfo.name"
                    placeholder="名称"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="标识符" prop="identifier">
                  <el-input
                    clearable
                    v-model.trim="serviceOutputInfo.identifier"
                    placeholder="标识符"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="描述" prop="description">
                  <el-input
                    clearable
                    v-model.trim="serviceOutputInfo.description"
                    placeholder="描述"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="组织机构" prop="unit">
                  <el-input
                    clearable
                    v-model.trim="serviceOutputInfo.unit"
                    placeholder="组织机构"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="类型" prop="dataType">
                  <el-select
                    v-model="serviceOutputInfo.dataType"
                    placeholder="类型"
                    style="width: 350px"
                    class="elSelect"
                  >
                    <el-option
                      v-for="(item, index) in dataTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  size="small"
                  label="取值范围"
                  v-if="serviceOutputInfo.dataType"
                >
                  <div class="range-input">
                    <el-input
                      v-model.trim="serviceOutputInfo.min"
                      placeholder="最小值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                    ——
                    <el-input
                      v-model.trim="serviceOutputInfo.max"
                      placeholder="最大值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-form>
              <div style="display: flex; justify-content: flex-end">
                <el-button
                  size="mini"
                  @click="
                    onCancelParams('serviceOutputInfo', 'serviceIsOutputActive')
                  "
                  >取 消</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="
                    onConfirmParams(
                      'refServiceOutputInfo',
                      'serviceOutputInfo',
                      'serviceOutputData',
                      'serviceIsOutputActive'
                    )
                  "
                  v-preventReClick="1000"
                  >确 定</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <el-form
        :model="eventInfo"
        :rules="rules"
        ref="refFunctionInfo"
        label-width="110px"
        v-if="functionType == 'event'"
      >
        <el-form-item size="small" label="名称" prop="name" key="99">
          <el-input
            clearable
            v-model.trim="eventInfo.name"
            placeholder="名称"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="标识符" prop="identifier" key="98">
          <el-input
            clearable
            v-model.trim="eventInfo.identifier"
            placeholder="标识符"
            maxlength="30"
          ></el-input>
        </el-form-item>
        <!-- 输出参数 -->
        <el-form-item size="small" label="输出参数" prop="description">
          <el-table
            :data="eventOutputData"
            :header-cell-style="headerStyle"
            max-height="400px"
            v-if="!eventIsOutputActive"
          >
            <el-table-column
              align="center"
              prop="name"
              label="参数名称"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="identifier"
              label="标识符"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="描述"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="dataType"
              label="类型"
            ></el-table-column>
            <el-table-column align="center" key="3">
              <template slot="header" slot-scope="scope">
                <el-button
                  size="mini"
                  @click="onParamsAdd('eventOutputInfo', 'eventIsOutputActive')"
                  >添加参数</el-button
                >
              </template>
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <i
                    @click="
                      onEditParams(
                        scope.row,
                        'eventOutputInfo',
                        'eventIsOutputActive'
                      )
                    "
                    class="iconfont tianxie tableBtnIcon"
                    style="margin-right: 10px"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <i
                    @click="onDelParams(scope.row, 'eventOutputData')"
                    class="iconfont shanchu tableBtnIcon"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <!-- 事件输出参数 -->
          <el-tabs
            type="border-card"
            v-model="eventOutputSetting"
            v-if="eventIsOutputActive"
          >
            <el-tab-pane label="参数设置" name="output">
              <el-form
                :model="eventOutputInfo"
                :rules="eventOutputInfoRule"
                ref="refEventOutputInfo"
                label-width="90px"
              >
                <el-form-item size="small" label="名称" prop="name">
                  <el-input
                    clearable
                    v-model.trim="eventOutputInfo.name"
                    placeholder="名称"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="标识符" prop="identifier">
                  <el-input
                    clearable
                    v-model.trim="eventOutputInfo.identifier"
                    placeholder="标识符"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="描述" prop="description">
                  <el-input
                    clearable
                    v-model.trim="eventOutputInfo.description"
                    placeholder="描述"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="组织机构" prop="unit">
                  <el-input
                    clearable
                    v-model.trim="eventOutputInfo.unit"
                    placeholder="组织机构"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
                <el-form-item size="small" label="类型" prop="dataType">
                  <el-select
                    v-model="eventOutputInfo.dataType"
                    placeholder="类型"
                    style="width: 350px"
                    class="elSelect"
                  >
                    <el-option
                      v-for="(item, index) in dataTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  size="small"
                  label="取值范围"
                  v-if="eventOutputInfo.dataType"
                >
                  <div class="range-input">
                    <el-input
                      v-model.trim="eventOutputInfo.min"
                      placeholder="最小值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                    ——
                    <el-input
                      v-model.trim="eventOutputInfo.max"
                      placeholder="最大值"
                      maxlength="5"
                      type="number"
                      clearable
                      style="width: 200px"
                    ></el-input>
                  </div>
                </el-form-item>
              </el-form>
              <div style="display: flex; justify-content: flex-end">
                <el-button
                  size="mini"
                  @click="
                    onCancelParams('eventOutputInfo', 'eventIsOutputActive')
                  "
                  class="cancel-button"
                  >取 消</el-button
                >
                <el-button
                  size="mini"
                  @click="
                    onConfirmParams(
                      'refEventOutputInfo',
                      'eventOutputInfo',
                      'eventOutputData',
                      'eventIsOutputActive'
                    )
                  "
                  v-preventReClick="1000"
                  class="confirm-button"
                  >确 定</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeFunctionDialog">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqThingModelSave } from "@/api/model";
import tableStyleMixin from "@mixin/table-style";

export default {
  name: "",
  props: ["id", "productKey", "modelInfo", "editInfo"],
  mixins: [tableStyleMixin],
  data() {
    return {
      functionDialogVisible: false,
      radioGroupDisabled: false,
      // 属性
      propertyInfo: {
        name: "",
        identifier: "",
        dataType: "",
        description: "",
        unit: "",
        min: "",
        max: "",
      },
      // 表单验证规则
      rules: {
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
        ],
        dataType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
      },
      // 服务
      serviceInfo: {
        name: "",
        identifier: "",
      },
      // 输入参数
      serviceInputData: [],
      serviceIsInputActive: false,
      serviceInputInfo: {
        name: "",
        identifier: "",
        dataType: "",
        description: "",
        unit: "",
        min: "",
        max: "",
      },
      serviceInputSetting: "input",
      serviceInputInfoRule: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
        ],
        dataType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
      },

      // 输出参数
      serviceOutputData: [],
      serviceIsOutputActive: false,
      serviceOutputInfo: {
        name: "",
        identifier: "",
        dataType: "",
        description: "",
        unit: "",
        min: "",
        max: "",
      },
      serviceOutputSetting: "output",
      serviceOutputInfoRule: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
        ],
        dataType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
      },
      // 事件
      eventInfo: {
        name: "",
        identifier: "",
      },
      eventOutputSetting: "output",
      eventIsOutputActive: false,
      eventOutputInfo: {
        name: "",
        identifier: "",
        dataType: "",
        description: "",
        unit: "",
        min: "",
        max: "",
      },
      eventOutputData: [],
      eventOutputInfoRule: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
        ],
        dataType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
      },

      functionType: "property",
      dataTypeList: [
        {
          value: "int32",
          label: "int32",
        },
      ],
    };
  },
  watch: {
    functionDialogVisible(val) {
      if (val) {
        // 判断是否编辑。编辑的话针对类型进行赋值
        if (JSON.stringify(this.editInfo) != "{}") {
          // 禁止选择功能类型，将列表的数据赋值
          this.radioGroupDisabled = true;
          this.serviceInputData = [];
          this.serviceOutputData = [];
          this.eventOutputData = [];
          let { data, index, type } = this.editInfo;
          console.log(data, "data");
          if (type == "properties") {
            this.functionType = "property";
            this.propertyInfo.name = data.name;
            this.propertyInfo.identifier = data.identifier;
            this.propertyInfo.dataType = data.dataType.type;
            this.propertyInfo.description = data.description || "";
            this.propertyInfo.unit = data.unit || "";
            this.propertyInfo.min = data.dataType.specs.min || "";
            this.propertyInfo.max = data.dataType.specs.max || "";
          } else if (type == "services") {
            this.functionType = "service";
            this.serviceInfo.name = data.name;
            this.serviceInfo.identifier = data.identifier;
            if (data.inputData.length) {
              console.log(data.inputData, "data.inputData");
              let arr1 = data.inputData.map((item) => {
                return {
                  name: item.name,
                  identifier: item.identifier,
                  dataType: item.dataType.type,
                  description: item.description || "",
                  unit: item.unit || "",
                  min: item.dataType.specs.min || "",
                  max: item.dataType.specs.min || "",
                  id: this.generateRandomString(), // 添加一个id,用于判断是否编辑
                };
              });
              this.serviceInputData.push(...arr1);
            }
            if (data.outputData.length) {
              let arr2 = data.outputData.map((item) => {
                return {
                  name: item.name,
                  identifier: item.identifier,
                  dataType: item.dataType.type,
                  description: item.description || "",
                  unit: item.unit || "",
                  min: item.dataType.specs.min || "",
                  max: item.dataType.specs.min || "",
                  id: this.generateRandomString(), // 添加一个id,用于判断是否编辑
                };
              });
              this.serviceOutputData.push(...arr2);
            }
          } else {
            this.functionType = "event";
            this.eventInfo.name = data.name;
            this.eventInfo.identifier = data.identifier;
            if (data.outputData.length) {
              let arr2 = data.outputData.map((item) => {
                return {
                  name: item.name,
                  identifier: item.identifier,
                  dataType: item.dataType.type,
                  description: item.description || "",
                  unit: item.unit || "",
                  min: item.dataType.specs.min || "",
                  max: item.dataType.specs.min || "",
                  id: this.generateRandomString(), // 添加一个id,用于判断是否编辑
                };
              });
              this.eventOutputData.push(...arr2);
            }
          }
        } else {
          this.onInitByAdd();
        }
      }
    },
  },

  methods: {
    // 新增初始化
    onInitByAdd() {
      this.radioGroupDisabled = false;
      this.functionType = "property";
      this.propertyInfo.name = "";
      this.propertyInfo.identifier = "";
      this.propertyInfo.dataType = "";
      this.propertyInfo.description = "";
      this.propertyInfo.unit = "";
      this.propertyInfo.min = "";
      this.propertyInfo.max = "";
      // 服务
      this.serviceInputData = [];
      this.serviceOutputData = [];
      this.serviceInfo.name = "";
      this.serviceInfo.identifier = "";
      this.serviceInputInfo.name = "";
      this.serviceInputInfo.identifier = "";
      this.serviceInputInfo.dataType = "";
      this.serviceInputInfo.description = "";
      this.serviceInputInfo.unit = "";
      this.serviceInputInfo.min = "";
      this.serviceInputInfo.max = "";
      this.serviceOutputInfo.name = "";
      this.serviceOutputInfo.identifier = "";
      this.serviceOutputInfo.dataType = "";
      this.serviceOutputInfo.description = "";
      this.serviceOutputInfo.unit = "";
      this.serviceOutputInfo.min = "";
      this.serviceOutputInfo.max = "";
      // 事件
      this.eventOutputData = [];
      this.eventInfo.name = "";
      this.eventInfo.identifier = "";
      this.eventOutputInfo.name = "";
      this.eventOutputInfo.identifier = "";
      this.eventOutputInfo.dataType = "";
      this.eventOutputInfo.description = "";
      this.eventOutputInfo.unit = "";
      this.eventOutputInfo.min = "";
      this.eventOutputInfo.max = "";
    },
    // 随机生成16位数id
    generateRandomString() {
      const characters = "0123456789";
      let result = "";
      const charactersLength = characters.length;
      for (let i = 0; i < 16; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * charactersLength)
        );
      }
      return result;
    },
    // 功能类型变化
    onChangeFunctionType(e) {
      this.$refs.refFunctionInfo.clearValidate();
    },

    /**
     * @操作方法
     */

    // 添加参数
    onParamsAdd(infoName, isActiveName) {
      this.clearData(infoName);
      this[isActiveName] = true;
    },
    // 编辑参数
    onEditParams(e, infoName, isActiveName) {
      this[infoName] = JSON.parse(JSON.stringify(e));
      this[isActiveName] = true;
    },
    // 删除参数
    onDelParams(e, dataName) {
      this[dataName] = this[dataName].filter((item) => item.id !== e.id);
    },
    // 取消参数
    onCancelParams(infoName, isActiveName) {
      this[isActiveName] = false;
      this.clearData(infoName);
    },
    // 确认参数
    onConfirmParams(refName, infoName, dataName, isActiveName) {
      this.$refs[refName].validate(async (valid) => {
        if (valid) {
          if (
            this[infoName].name &&
            this[infoName].identifier &&
            this[infoName].dataType
          ) {
            let info = JSON.parse(JSON.stringify(this[infoName]));
            if (info.id) {
              // 编辑
              const index = this[dataName].findIndex(
                (item) => item.id === info.id
              );
              // 如果找到了匹配的元素，则替换它
              if (index !== -1) {
                this[dataName].splice(index, 1, info);
              }
            } else {
              info.id = this.generateRandomString(); // 添加一个id,用于判断是否编辑
              this[dataName].push(info);
            }
          }
          this[isActiveName] = false;
        }
      });
    },

    // 清空参数数据
    clearData(name) {
      this[name].dataType = "";
      this[name].description = "";
      this[name].identifier = "";
      this[name].max = "";
      this[name].min = "";
      this[name].name = "";
      this[name].unit = "";
      delete this[name].id;
    },

    // 确认
    async onSubmit() {
      // 分别将属性、服务、事件有数据的进行格式拼装

      // 属性
      let property = {
        identifier: this.propertyInfo.identifier,
        dataType: {
          type: this.propertyInfo.dataType,
          specs: {
            min: this.propertyInfo.min || "", // 这里你指定的最小值是 "1"，但目标对象中是 "10"，这里我保持原始值
            max: this.propertyInfo.max || "", // 根据你的目标对象，这里我修改为 "10"
          },
        },
        name: this.propertyInfo.name,
        accessMode: "rw",
        description: this.propertyInfo.description, // 目标对象的description为空字符串，这里我使用原始对象的description
        unit: this.propertyInfo.unit || "", // 目标对象的unit为null
        proData: "", // 目标对象的proData为null
      };
      // 服务
      let serviceInputData = [];
      if (this.serviceInputData.length > 0) {
        serviceInputData = this.serviceInputData.map((item) => {
          return {
            identifier: item.identifier,
            name: item.name,
            description: item.description || "",
            unit: item.unit || "",
            dataType: {
              type: item.dataType,
              specs: {
                min: item.min || "", // 这里你指定的最小值是 "1"，但目标对象中是 "10"，这里我保持原始值
                max: item.max || "", // 根据你的目标对象，这里我修改为 "10"
              },
            },
          };
        });
      }
      let serviceOutputData = [];
      let service = [];
      if (this.serviceOutputData.length > 0) {
        serviceOutputData = this.serviceOutputData.map((item) => {
          return {
            identifier: item.identifier,
            name: item.name,
            description: item.description || "",
            unit: item.unit || "",
            dataType: {
              type: item.dataType,
              specs: {
                min: item.min || "", // 这里你指定的最小值是 "1"，但目标对象中是 "10"，这里我保持原始值
                max: item.max || "", // 根据你的目标对象，这里我修改为 "10"
              },
            },
          };
        });
      }
      if (this.serviceInfo.identifier && this.serviceInfo.name) {
        service = [
          {
            identifier: this.serviceInfo.identifier,
            name: this.serviceInfo.name,
            inputData: serviceInputData,
            outputData: serviceOutputData,
          },
        ];
      }
      // 事件
      let eventOutputData = [];
      let event = [];
      if (this.eventOutputData.length > 0) {
        eventOutputData = this.eventOutputData.map((item) => {
          return {
            identifier: item.identifier,
            name: item.name,
            description: item.description || "",
            unit: item.unit || "",
            dataType: {
              type: item.dataType,
              specs: {
                min: item.min || "",
                max: item.max || "",
              },
            },
          };
        });
      }
      if (this.eventInfo.identifier && this.eventInfo.name) {
        event = [
          {
            identifier: this.eventInfo.identifier,
            name: this.eventInfo.name,
            outputData: eventOutputData,
          },
        ];
      }
      let modelInfo = {
        properties: [],
        services: [],
        events: [],
      };
      // 如果列表已存在数据时，则在列表原有基础上添加(不是编辑且列表有数据)
      if (
        JSON.stringify(this.modelInfo) != "{}" &&
        JSON.stringify(this.editInfo) == "{}"
      ) {
        // 添加 property 到 properties 数组
        if (property.name && property.identifier && property.dataType) {
          this.modelInfo.properties.push(property);
        }
        // 添加 service 到 services 数组
        if (service.length) {
          this.modelInfo.services.push(service[0]);
        }
        // 添加 event 到 events 数组
        if (event.length) {
          this.modelInfo.events.push(event[0]);
        }
        modelInfo = this.modelInfo;
      } else if (JSON.stringify(this.modelInfo) == "{}") {
        // 如果列表不存在数据时，则存进新建的对象中
        modelInfo.properties.push(property);
        if (service.length) {
          modelInfo.services.push(service[0]);
        }
        if (event.length) {
          modelInfo.events.push(event[0]);
        }
      } else if (JSON.stringify(this.editInfo) != "{}") {
        // 编辑的情况下直接替换数据
        let { type, index } = this.editInfo;
        this.modelInfo[type].splice(
          index,
          1,
          type == "properties"
            ? property
            : type == "services"
            ? service[0]
            : event[0]
        );
        modelInfo = this.modelInfo;
      }
      this.$refs.refFunctionInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqThingModelSave({
            requestId: this.id,
            data: {
              productKey: this.productKey,
              model: JSON.stringify(modelInfo),
            },
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("操作成功");
          this.$parent.onThingModel();
          this.closeFunctionDialog();
        }
      });
    },
    // 点击关闭弹框
    closeFunctionDialog() {
      this.uploadDisabled = false;
      this.$refs.refFunctionInfo.resetFields();
      this.functionDialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
@import url("../../../../../common.less");

.title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  color: @primaryThemeTxtColor2;
  width: 110px;
}

.iconfont {
  cursor: pointer;
}
</style>
